import React, { useState, useEffect } from 'react';
import { Button, DatePicker, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import http from '../../api/http';
import type { FormProps } from 'antd';
import { Checkbox, Form, Input } from 'antd';

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}


const App: React.FC = () => {

  const [list, setList] = useState([]);
  const [total, setTotal] = useState('')
  const [page, setPage] = useState(1)
  const [pageSize, setPagesize] = useState(10)
  const [title, setTitle] = useState('')
  const [tag, setTag] = useState('')


  const fetchList = async () => {
    const params: {
      page: number,
      pageSize: number,
      keyword?: string,
      tag?: string,
    } = {
      page,
      pageSize
    }
    if (title) params.keyword = title;
    if (tag) params.tag = tag
    const res = await http.get('/article/list', {
      params
    })
    console.log(res, '列表')
    setList(res.data.rows)
    setTotal(res.data.count)
  }
  useEffect(() => {
    fetchList()
  }, [page, pageSize, title, tag])

  // 分页
  const change = (currentPage: number, currentPageSize: number) => {
    setPage(currentPage)
    setPagesize(currentPageSize)
  }

  // 搜索
  const [form] = Form.useForm();
  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    setTitle(values.title);
    setTag(values.tag)
  };
  const handleRest = () => {
    setTitle('');
    setTag('')
    form.resetFields()
  };

  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '浏览量',
      dataIndex: 'viewCount',
      key: 'viewCount',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.name.length > 5 ? 'geekblue' : 'green';
            return (
              <Tag color={color} key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button>查看</Button>
          <Button>编辑</Button>
          <Button>删除</Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      {/* 表单 */}
      <Form
        name="basic"
        layout='inline'
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <div style={{ display: 'flex' }}>
          <Form.Item<FieldType>
            label="id"
            name="id"
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="标签"
            name="tag"
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </div>

        <div style={{ display: 'flex' }}>
          <Form.Item<FieldType>
            label="筛选方式"
            name="fs"
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="创建时间"
            name="createdAt"
          >
            <DatePicker />
          </Form.Item>

          <Form.Item<FieldType>
            label="状态"
            name="status"
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" onClick={()=>handleRest()} >
              重置
            </Button>
          </Form.Item>
        </div>

      </Form>
      {/* 表格 */}
      <Table<DataType>
        columns={columns}
        dataSource={list}
        pagination={{
          total: total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共有 ${total} 条`,
          onChange: change
        }}
      />
    </div>
  )
}

export default App;